<template>
    <el-form style="margin: auto;">
        <el-form-item label="修改备注:" prop="noteContent" class="noteContent">
            <el-input
                v-model="activityRemark.noteContent"
                type="textarea"
                placeholder="请输入活动备注"
                :style="{ width: '20vw' }"/>
        </el-form-item>
    </el-form>
    <el-button type="primary" @click="userSubmit()">提 交</el-button>
    <el-button type="primary" plain @click="goBack">返 回</el-button>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {doGet, doPost} from "../http/httpRequest.js";
import {useRoute, useRouter} from "vue-router";
import {showMessage} from "@/util/message.js";

// 活动备注数据对象，用于存储备注的编辑内容
let activityRemark = ref({});

// 路由实例 - 用于页面导航和参数获取
const router = useRouter();
const route = useRoute();

// 组件挂载完成后执行初始化操作
onMounted(() => {
    // 获取路由参数中的活动备注ID
    let activityRemarkId = route.params.activityRemarkId;
    // 加载活动备注详情数据
    loadActivityRemark(activityRemarkId);
})

/**
 * 加载活动备注详情数据
 * @param {string} activityRemarkId - 活动备注ID，用于从后端获取特定备注信息
 */
const loadActivityRemark = activityRemarkId => {
    // 调用GET接口获取备注详情
    doGet('/api/activity/remark/detail/' + activityRemarkId).then(resp => {
        if (resp.data.code == 200) {
            // 接口调用成功，更新备注数据
            activityRemark.value = resp.data.info;
        } else {
            // 接口调用失败，显示错误提示
            showMessage(resp.data.msg, 'error');
        }
    })
}

/**
 * 表单提交处理函数 - 处理活动备注的编辑提交逻辑
 */
const userSubmit = () => {
    // 调用POST接口提交编辑后的备注内容
    doPost('/api/activity/remark/edit', {
        activityRemarkId: route.params.activityRemarkId, // 备注ID，从路由参数获取
        noteContent: activityRemark.value.noteContent    // 编辑后的备注内容
    }).then(resp => {
        if (resp.data.code == 200) {
            showMessage(resp.data.msg, 'success'); // 提交成功提示
            router.back(); // 返回上一页
        } else {
            showMessage(resp.data.msg, 'error'); // 提交失败提示
        }
    })
}

/**
 * 返回上一页函数 - 导航回之前的页面
 */
const goBack = () => {
    router.back();
}
</script>

<style scoped>

</style>